<template>
    <el-table
      :data="data"
      style="width: 100%"
      v-loading="loading"
      stripe
      border
    >
      <el-table-column prop="deviceId" label="设备ID" width="100" align="center"></el-table-column>
      <el-table-column prop="deviceName" label="设备名称" width="150" align="center"></el-table-column>
      <el-table-column prop="description" label="问题描述" min-width="200" show-overflow-tooltip></el-table-column>
      <el-table-column label="紧急程度" width="120" align="center">
        <template #default="{row}">
          <el-tag :type="getPriorityTagType(row.priority)">
            {{ getPriorityText(row.priority) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="120" align="center">
        <template #default="{row}">
          <el-tag :type="getStatusTagType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createdTime" label="报修时间" width="180" align="center"></el-table-column>
      <el-table-column prop="resolvedTime" label="解决时间" width="180" align="center"></el-table-column>
      <el-table-column prop="technicianName" label="处理技术员" width="150" align="center"></el-table-column>
      <el-table-column label="操作" width="180" align="center" fixed="right">
      <template #default="{row}">
        <el-button 
          type="info" 
          size="small" 
          @click="showDetail(row)"
        >
          详情
        </el-button>
        <el-button 
          type="warning" 
          size="small" 
          @click="handleEdit(row)"
          v-if="row.status !== 2"  
        >
          修改
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 详情对话框 -->
  <el-dialog v-model="showDetailDialog" :title="`报修详情 - ${currentDetail.deviceName || ''}`" width="70%">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="设备ID">{{ currentDetail.deviceId }}</el-descriptions-item>
      <el-descriptions-item label="设备名称">{{ currentDetail.deviceName }}</el-descriptions-item>
      <el-descriptions-item label="紧急程度">
        <el-tag :type="getPriorityTagType(currentDetail.priority)">
          {{ getPriorityText(currentDetail.priority) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="当前状态">
        <el-tag :type="getStatusTagType(currentDetail.status)">
          {{ getStatusText(currentDetail.status) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="报修时间">{{ currentDetail.createdTime }}</el-descriptions-item>
      <el-descriptions-item label="处理技术员" v-if="currentDetail.technicianName">{{ currentDetail.technicianName }}</el-descriptions-item>
      <el-descriptions-item label="解决时间" v-if="currentDetail.resolvedTime">{{ currentDetail.resolvedTime }}</el-descriptions-item>
      <el-descriptions-item label="问题描述" :span="2">
        <div style="white-space: pre-line;">{{ currentDetail.description }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="处理意见" :span="2" v-if="currentDetail.comment">
        <div style="white-space: pre-line;">{{ currentDetail.comment }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="解决方案" :span="2" v-if="currentDetail.solution">
        <div style="white-space: pre-line;">{{ currentDetail.solution }}</div>
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>

  <!-- 编辑对话框 -->
  <el-dialog v-model="showEditDialog" :title="`编辑报修 - ${currentEdit.deviceName || ''}`" width="50%">
    <el-form :model="currentEdit" label-width="100px">
      <el-form-item label="紧急程度">
        <el-select v-model="currentEdit.priority" placeholder="请选择紧急程度">
          <el-option label="低" :value="1"></el-option>
          <el-option label="中" :value="2"></el-option>
          <el-option label="高" :value="3"></el-option>
          <el-option label="紧急" :value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="问题描述">
        <el-input 
          v-model="currentEdit.description" 
          type="textarea" 
          :rows="5"
          placeholder="请输入问题描述"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="showEditDialog = false">取消</el-button>
      <el-button type="primary" @click="confirmEdit">保存</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
import { updateUserRepair } from '@/api/user'

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update'])

const showDetailDialog = ref(false)
const showEditDialog = ref(false)
const currentDetail = ref<any>({})
const currentEdit = ref<any>({})

// 紧急程度文本
const getPriorityText = (priority: number) => {
  const priorityMap = {
    1: '低',
    2: '中',
    3: '高',
    4: '紧急'
  }
  return priorityMap[priority] || '未知'
}

// 紧急程度标签类型
const getPriorityTagType = (priority: number) => {
  const typeMap = {
    1: 'info',
    2: 'warning',
    3: 'danger',
    4: 'danger'
  }
  return typeMap[priority] || ''
}

// 状态文本
const getStatusText = (status: number) => {
  const statusMap = {
    0: '未处理',
    1: '处理中',
    2: '已解决'
  }
  return statusMap[status] || '未知'
}

// 状态标签类型
const getStatusTagType = (status: number) => {
  const typeMap = {
    0: 'danger',
    1: 'warning',
    2: 'success'
  }
  return typeMap[status] || ''
}

// 显示详情
const showDetail = (row: any) => {
  currentDetail.value = { ...row }
  showDetailDialog.value = true
}

// 编辑记录
const handleEdit = (row: any) => {
  currentEdit.value = { ...row }
  showEditDialog.value = true
}

// 确认编辑
const confirmEdit = async () => {
  try {
    await updateUserRepair(currentEdit.value)
    ElMessage.success('修改成功')
    showEditDialog.value = false
    emit('update')
  } catch (error) {
    ElMessage.error('修改失败')
  }
}
</script>

<style scoped>
.el-table {
  margin-top: 10px;
}
</style>